<template>
    <div class="address">
        <!-- 导航栏开始 -->
            <van-nav-bar title="常用地址" left-text="返回" left-arrow @click-left="onClickLeft" />  
        <!-- 导航栏结束 -->
        <!-- 地址开始-->
            <van-address-list v-model="id" :list="addresses"    default-tag-text="默认" @add="onAdd" @edit="onEdit">
        <!-- 地址结束-->
        <!-- 编辑弹出层开始 -->
        <van-popup v-model="sho"  position="bottom" :style="{ height: '30%' }" class="gai">
            <div class="xiu">修改地址</div>
                <van-address-edit
                    :area-list="areaList"
                    show-search-result
                    :search-result="searchResult"
                    :area-columns-placeholder="['请选择', '请选择', '请选择']"
                    @save="onSave"
                    @delete="onDelete"
                    @change-detail="onChangeDetail"/>
        </van-popup> 
        <!-- 编辑弹出层结束 -->
        <!-- 新增弹出层开始 -->
        <van-popup v-model="show"  position="bottom" :style="{ height: '30%' }" class="add">
            <div class="new">新增地址</div>
             <van-address-edit
                    :area-list="areaList"
                    show-search-result
                    :search-result="searchResult"
                    :area-columns-placeholder="['请选择', '请选择', '请选择']"
                    @save="onSave"
                    @delete="onDelete"
                    @change-detail="onChangeDetail"/>
        </van-popup>
        </van-address-list>
        <!-- 新增弹出层结束 -->
    </div>
</template>
<script>
import {get} from '@/http/axios.js'
import { areaList } from '@vant/area-data';
export default {
  data() {
    return {
      chosenAddressId: '1',
      list:{
          page:1,
          pageSize:10
      },
      addresses:[],
      id:'',
      show:false,
      sho:false,
      searchResult: [],
      areaList
    };
  },
  methods: {
    onClickLeft(){
        this.$router.push({path:'/manager/user'})
    },
    // 查询所有地址
    findAllAddress(){
        get('/address/pageQuery',this.list).then(res=>{
            // console.log(res.data.data.list);
            this.addresses =res.data.data.list
        })
    },
    onAdd() {
    //  alert(999)
    this.show = true
    },
    onEdit() {
      this.sho = true
    },
     onSave() {
      
    },
    onDelete() {
      
    },
    onChangeDetail(){}
      },
  created(){
      this.findAllAddress()
  },
//   mounted(){
//       this.addresses.forEach(re=>{
//           console.log(re);
//       })
//   }
};
</script>
<style scoped>
.address .gai .xiu{
    font-size: 16px;
    text-align: center;
    margin-top: 20px;
    font-weight: 502;
}
.address .add .new{
    font-size: 16px;
    text-align: center;
    margin-top: 20px;
    font-weight: 502;
}
</style>